<template>
  <ul class="TemplateStyle">
    <!-- 出库日期 -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/date.png" />
        <span class="li_txt">出库日期</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].outTime" :disabled="true" />
      </div>
    </li>
    <!-- 出库物资(名称) -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/birth.png" />
        <span class="li_txt">出库物资(名称)</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].outName" :disabled="true" />
      </div>
    </li>
    <!-- 出库物资(单位) -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/order.png" />
        <span class="li_txt">出库物资(单位)</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].outUnit" :disabled="true" />
      </div>
    </li>
    <!-- 出库物资(数量) -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/date.png" />
        <span class="li_txt">出库物资(数量)</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].outNum" :disabled="true" />
      </div>
    </li>
    <!-- 物资单价(元) -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/money.png" />
        <span class="li_txt">物资单价(元)</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].outPrice" :disabled="true" />
      </div>
    </li>
    <!-- 保质期 -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/term.png" />
        <span class="li_txt">保质期</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].effectPeriod" :disabled="true" />
      </div>
    </li>
    <!-- 购货方 -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/donation.png" />
        <span class="li_txt">购货方</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].buyer" :disabled="true" />
      </div>
    </li>
    <!-- 承运方 -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/transport.png" />
        <span class="li_txt">承运方</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].shipper" :disabled="true" />
      </div>
    </li>
    <!-- 快递单号 -->
    <li>
      <div class="label">
        <img class="li_icon" src="../../assets/image/symbol.png" />
        <span class="li_txt">快递单号</span>
      </div>
      <div class="label">
        <input type="text" :value="list[currentPage-1].shipId" :disabled="true" />
      </div>
    </li>
    <!-- 区块链验证 -->
    <img @click="verificationPopup" class="block_chain" src="../../assets/image/blockchain.png" />
    <!-- loading -->
    <van-popup round class="main" v-model="blockPupup">
      <ul class="list">
        <!-- 标题 -->
        <transition name="fade">
          <li v-if="blockPupup" class="list_child">
            <span>查询区块链</span>
            <van-loading
              v-if="listPopup[0].titleLoading"
              size="1.5rem"
              color="#1989fa"
              type="spinner"
            />
            <img
              v-if="!listPopup[0].titleLoading"
              class="icon"
              :src="this.i==0 ? titleImga : titleImgb"
              alt
            />
          </li>
        </transition>
        <!-- 是否命中 -->
        <transition name="fade">
          <li v-if="listPopup[1].loadingText" class="list_child">
            <span>{{Text}}</span>
            <img
              v-if="!listPopup[0].titleLoading"
              class="icon"
              :src="this.i==0 ? titleImga : titleImgb"
              alt
            />
          </li>
        </transition>
        <!-- 具体位置 -->
        <transition name="fade">
          <li v-if="listPopup[2].loadingPosition" class="list_child">
            <span>位于区块{{list[currentPage-1].blockNum}}</span>
            <img class="icon" src="../../assets/image/directional.png" alt />
          </li>
        </transition>
        <!-- 验证签名 -->
        <transition name="fade">
          <li v-if="listPopup[3].verification" class="list_child">
            <span>验证签名</span>
            <van-loading
              v-if="!listPopup[5].verificationState"
              size="1.5rem"
              color="#1989fa"
              type="spinner"
            />
            <img
              v-if="listPopup[5].verificationState"
              class="icon"
              :src="this.a==0 ? titleImga : titleImgb"
              alt
            />
          </li>
        </transition>
        <!-- 签名验证成功否 -->
        <transition name="fade">
          <li v-if="listPopup[4].loadingFailed" class="list_child">
            <span>{{TextFailed}}</span>
            <img
              v-if="listPopup[5].verificationState"
              class="icon"
              :src="this.a==0 ? titleImga : titleImgb"
              alt
            />
          </li>
        </transition>
        <!-- 签名人 -->
        <transition name="fade">
          <li v-if="listPopup[6].loadingSigner" class="list_child">
            <span>签名人：{{userSigner}}</span>
            <img class="icon" src="../../assets/image/success.png" alt />
          </li>
        </transition>
      </ul>
    </van-popup>
  </ul>
</template>
<script>
import moment from "moment";

export default {
  name: "SalesOutlet",
  props: {
    currentPage: {
      type: Number,
      default: ""
    },
    queryType: {
      type: String,
      default: ""
    },
    listPopup: {
      type: Array
    },
    date: {
      type: String,
      default: ""
    },
    date1: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      blockPupup: false, // 弹出层
      Text: "", // 文字内容
      blockNum: "", //位于第几区块
      userSigner: "", // 签名人
      i: 0,
      a: 0,
      titleImga: require("../../assets/image/success.png"), // 查询命中状态
      titleImgb: require("../../assets/image/error.png"), // 查询命中状态
      TextFailed: "",
      list: [{}]
    };
  },
  methods: {
    // 区块链认证
    verificationPopup() {
      // 显示弹出层及第一条
      this.blockPupup = true;
      this.listPopup[0].titleLoading = true; // 第一条转圈
      // 判断打勾或者打叉
      if (this.i == 0) {
        this.i == 1;
      } else {
        this.i == 0;
      }
      if (this.a == 2) {
        this.a == 1;
      } else {
        this.a == 0;
      }
      let that = this;
      // 接口参数
      let params = {};
      let postData = this.list[this.currentPage - 1];
      for (let key in postData) {
        params[key] = postData[key];
      }
      params.token = JSON.parse(localStorage.getItem("login")).res.token;
      params.userName = JSON.parse(
        localStorage.getItem("login")
      ).res.user.userName;
      // 调用接口
      this.$api
        .verifyDonateRecord(params)
        .then(res => {
          console.log("区块链验证", res);
          //动画
          // 命中查询
          setTimeout(that => {
            this.listPopup[0].titleLoading = false;
            this.listPopup[1].loadingText = true;
            this.Text = "查询命中";
            this.i = 0; // 打勾
          }, 1000);
          //位置
          setTimeout(that => {
            this.listPopup[2].loadingPosition = true;
            // });
          }, 2000);
          // 验证签名
          setTimeout(that => {
            this.listPopup[3].verification = true;
          }, 3000);
          // 签名验证成功
          setTimeout(that => {
            this.listPopup[4].loadingFailed = true;
            this.TextFailed = "签名验证成功";
            this.i = 0;
            this.listPopup[5].verificationState = true; //打勾
          }, 4000);
          // 签名人
          setTimeout(that => {
            this.userSigner = this.list[0].userName;
            this.listPopup[6].loadingSigner = true;
          }, 5000);
        })
        .catch(err => {
          console.log(err);
          if (err == "未查询到该交易") {
            // 查询未命中
            setTimeout(that => {
              this.listPopup[1].loadingText = true;
              this.Text = "查询未命中";
              this.listPopup[0].titleLoading = false;
              this.a = 0;
            }, 1000);
          } else if (err == "签名验证失败") {
            console.log("666");
            // 命中查询
            setTimeout(that => {
              this.listPopup[0].titleLoading = false;
              this.listPopup[1].loadingText = true;
              this.Text = "查询命中";
              this.a = 0; // 打勾
            }, 1000);
            //位置
            setTimeout(that => {
              this.listPopup[2].loadingPosition = true;
              // });
            }, 2000);
            // 验证签名
            setTimeout(that => {
              this.listPopup[3].verification = true;
              this.listPopup[0].titleLoading = false;
              this.a = 1;
            }, 3000);
            // 签名验证失败
            setTimeout(that => {
              this.listPopup[4].loadingFailed = true; //显示签名验证失败
              this.TextFailed = "签名验证失败";
              this.a = 1;
              this.listPopup[5].verificationState = true; //失败显示
            }, 4000);
          }
        });
    },
    // 图片弹窗
    showPopup() {
      this.show = true;
    }
  },
  created() {
    if (this.queryType == "date") {
      // 调用时间查询接口
      let params = {
        token: JSON.parse(localStorage.getItem("login")).res.token,
        userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
        startTime: this.date,
        endTime: this.date1
      };
      this.$api.getProduceProductOutByTime(params).then(res => {
        this.list = res;
        this.list.forEach(item => {
          item.outTime = moment(item.outTime).format("YYYY-MM-DD HH:mm:ss");
        });
      });
    } else if (this.queryType == "love") {
      console.log("通过爱心码查询销售出库");
    }
  }
};
</script>
<style>
@import "../../assets/css/TemplateStyle.css";
</style>
